import classnames from 'classnames';
import Icon from '@/components/Icons';
import styles from './index.module.scss';
import { ResultsType } from '@/store/reducer/search';
import { useHistory } from 'react-router-dom';
import { Image } from 'antd-mobile';
import { ArticleType } from '@/store/reducer/article';

type ArticleItemType = {
  data: ResultsType | ArticleType;
};
export default function ArticleItem(props: ArticleItemType) {
  const { data } = props;
  const { type, images } = data.cover || {};

  const history = useHistory();

  const handleClose = (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
    // 测试:阻止事件冒泡
    e.stopPropagation();
    console.log(111);
  };
  return (
    <div
      className={styles.root}
      onClick={() => history.push('/article/' + data.art_id)}
    >
      {/* t3: 三图结构 none-mt没有图片结构  */}
      <div
        className={classnames('article-content', {
          t3: type === 3,
          'none-mt': type === 0,
        })}
      >
        <h3>{data.title}</h3>
        {type !== 0 && (
          <div className="article-imgs">
            {images.map((item, index) => (
              <div className="article-img-wrapper" key={index}>
                {/* <img src={item} alt="" /> */}
                {/*使用antd库 属性lazy 图片懒加载 */}
                {/* fit图片显示方式 */}
                <Image src={item} lazy fit="cover" />
              </div>
            ))}
          </div>
        )}
      </div>
      <div className={classnames('article-info', type === 0 ? 'none-mt' : '')}>
        <span>{data.aut_name}</span>
        <span>{data.comm_count}评论</span>
        <span>{data.pubdate}</span>

        <span className="close" onClick={(e) => handleClose(e)}>
          <Icon type="iconbtn_essay_close" />
        </span>
      </div>
    </div>
  );
}
